export default function animate(dom, json, time, callBack) {
  let i;
  /**
   * 分析:
   *     -我们的编程思路使用定时器和循环完成动画
   *     -既然是使用循环动画，那么每一次动画都是一个步长值
   *   -首要问题要得到步长值
   *        步长值 = 总距离 / 总次数
   *        总距离 = 目标值 - 初始值
   *        总次数 = 总时间 / 定时器的间隔时间
   */
  let count = 0;
  // 定时器间隔时间
  const interval = 20;
  // 定义总次数
  const allCount = time / interval;
  // 定义对象， 用于保存元素的初始值
  const nowJson = {};
  for (i in json) {
    nowJson[i] = parseInt(getComputedStyle(dom)[i]);
  }
  // 当循环完毕之后， 元素的初始值也就有了

  // console.log(nowJson);

  // 定义对象 用于保存元素的步长值
  const stepJson = {};
  for (i in json) {
    // 总距离 = 目标值 - 初始值
    // 步长值 = 总距离 / 总次数
    stepJson[i] = (json[i] - nowJson[i]) / allCount;
  }

  // 尝试开启一个定时器
  const timer = setInterval(function () {
    let i;
    // 计算器++
    count++;
    // 使用for循环不断的改变dom的状态
    for (i in json) {
      // 当前值 = 初始值 + 步长值 * 次数
      dom.style[i] = nowJson[i] + stepJson[i] * count + "px";
    }

    //  判断是否到达边界
    if (count >= allCount) {
      // 拉终
      for (i in json) {
        dom.style[i] = json[i] + "px";
      }
      // 停表
      clearInterval(timer);

      // 执行回调函数
      callBack && callBack();
    }
  }, interval);
}
